// 导航滑块 =================================================
let nav_menu = document.getElementsByClassName('nav_menu')[0];
let navDivs = nav_menu.getElementsByTagName('div');
let navList = Array.from(navDivs);
navList.forEach(function (item) {
    // 给每个标签绑定点击事件
    item.onclick = function () {
        // 移除其他标签选定状态
        navList.forEach(function (i) {
            i.classList.remove("nav_select")
        })
        // 给当前获得点击的标签添加类
        item.classList.add("nav_select");
    }
})


// 轮播图 =================================================
let slider_item = document.getElementById('slider_item')
let slider_item_width = slider_item.offsetWidth
let slider_container = document.getElementsByClassName('slider_container')[0]
// 自动播放
function autoPlay() {
    let slider_container_left = parseFloat(slider_container.style.left)
    if (Math.abs(slider_container_left) >= 4 * slider_item_width) {
        slider_container.style.left = 0 + 'px'
        pointChange(0)
    } else {
        slider_container.style.left = slider_container_left - slider_item_width + 'px'
        pointChange(Math.abs(slider_container_left) / slider_item_width + 1)
    }
    console.log(slider_container.style.left);
}
let timer = setInterval(autoPlay, 1500);

// 当鼠标放在图片上时,清除定时器
slider_container.onmouseover = function () {
    clearInterval(timer);
}
// 鼠标离开定时器时,开启定时器
slider_container.onmouseout = function () {
    timer = setInterval(autoPlay, 2000);
}

// 轮播图左右控制器
let slider_controller_left = document.getElementById('slider_controller_left')
let slider_controller_right = document.getElementById('slider_controller_right')

slider_controller_left.onclick = function () {
    let slider_container_left = parseFloat(slider_container.style.left)
    if (Math.abs(slider_container_left) <= 0) {
        slider_container.style.left = -slider_item_width * 4 + 'px'
        pointChange(4)
    } else {
        slider_container.style.left = slider_container_left + slider_item_width + 'px'
        pointChange(Math.abs(slider_container_left) / slider_item_width - 1)
    }
}
slider_controller_right.onclick = function () {
    let slider_container_left = parseFloat(slider_container.style.left)
    if (Math.abs(slider_container_left) >= 4 * slider_item_width) {
        slider_container.style.left = 0 + 'px'
        pointChange(0)

    } else {
        slider_container.style.left = slider_container_left - slider_item_width + 'px'
        pointChange(Math.abs(slider_container_left) / slider_item_width + 1)
    }
}

// 轮播图方块按钮
let slider_point = document.getElementsByClassName('slider_point')[0]
let slider_points = Array.from(slider_point.getElementsByTagName('span'))

slider_points.forEach((item, index) => {
    item.onclick = function () {
        slider_container.style.left = - index * slider_item_width + 'px'
        pointChange(index)
    }
})
// 方块按钮变化
function pointChange(n) {
    slider_points.forEach((item, index) => {
        item.style.border = " 4px solid #bec1c3";
    })
    slider_points[n].style.border = " 4px solid black";
}
// echarts图表处理 =========================================
// 封装XMLHTTPRequest
let get = function (url) {
    return new Promise((resolve, reject) => {
        let httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', url, true);
        httpRequest.send();
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                let json = httpRequest.responseText;
                let d = {}
                d.x = JSON.parse(json).data.xAxis;
                d.y = JSON.parse(json).data.series;
                resolve(d)
            }
        };
    })

}

//获取月数据并配置表1
get('https://gongjuhao.com/api/?type=month')
    .then(res => {
        setChart1(res)
    })

// 获取周数据并配置表2、3
get('https://gongjuhao.com/api/?type=week')
    .then(res => {
        setChart2(res)
        setChart3(res)

    })


// 配置 chart1
let setChart1 = (monthData) => {
    let chart1 = echarts.init(document.getElementById('chart1'));
    let option = {
        title: {
            text: '曲线图数据展示'
        },
        xAxis: {
            type: 'category',

        },
        yAxis: {
            type: 'value',

            axisLine: {

            },
            splitLine: {
                show: true
            }
        },
        series: [
            {
                type: 'line',
                symbol: 'none',
                smooth: true,

            }
        ]
    };
    option.xAxis.data = monthData.x;
    option.series[0].data = monthData.y;
    chart1.setOption(option);

}

// 配置 chart2   
let setChart2 = (weekData) => {
    let chart2 = echarts.init(document.getElementById('chart2'));
    let data = []
    weekData.x.forEach((i) => {
        data.push({ name: i })
    })
    weekData.y.forEach((i, index) => {
        data[index].value = i
    })
    option = {
        title: {
            text: '饼状图数据展示'
        },
        series: [
            {
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                data
            }
        ]
    }
    chart2.setOption(option);
}


// 配置 chart3
let setChart3 = (weekData) => {
    let chart3 = echarts.init(document.getElementById('chart3'));
    option = {
        title: {
            text: '柱状图数据展示'
        },
        xAxis: {
            data: weekData.x
        },
        yAxis: {},
        series: [{
            type: 'bar',
            data: weekData.y
        }]
    };


    // 使用刚指定的配置项和数据显示图表。
    chart3.setOption(option);
}